@use 'variables' as *;
@use 'mixins' as *;

// 间距工具类
@each $size, $value in (
  'xs': $spacing-xs,
  'sm': $spacing-sm,
  'md': $spacing-md,
  'lg': $spacing-lg,
  'xl': $spacing-xl
) {
  // Margin
  .m-#{$size} { margin: $value !important; }
  .mt-#{$size} { margin-top: $value !important; }
  .mr-#{$size} { margin-right: $value !important; }
  .mb-#{$size} { margin-bottom: $value !important; }
  .ml-#{$size} { margin-left: $value !important; }
  .mx-#{$size} {
    margin-left: $value !important;
    margin-right: $value !important;
  }
  .my-#{$size} {
    margin-top: $value !important;
    margin-bottom: $value !important;
  }

  // Padding
  .p-#{$size} { padding: $value !important; }
  .pt-#{$size} { padding-top: $value !important; }
  .pr-#{$size} { padding-right: $value !important; }
  .pb-#{$size} { padding-bottom: $value !important; }
  .pl-#{$size} { padding-left: $value !important; }
  .px-#{$size} {
    padding-left: $value !important;
    padding-right: $value !important;
  }
  .py-#{$size} {
    padding-top: $value !important;
    padding-bottom: $value !important;
  }
}

// 文本对齐
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

// 文本样式
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-light { color: var(--text-light) !important; }
.text-white { color: $text-white !important; }

// 背景颜色
.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-light { background-color: var(--background-light) !important; }
.bg-white { background-color: var(--text-white) !important; }

// 显示属性
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

// Flex 工具类
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.align-start { align-items: flex-start !important; }
.align-end { align-items: flex-end !important; }
.align-center { align-items: center !important; }
.align-baseline { align-items: baseline !important; }
.align-stretch { align-items: stretch !important; }

// 定位
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

// 边框
.border { border: 1px solid var(--border-color) !important; }
.border-0 { border: 0 !important; }
.rounded { border-radius: $border-radius-md !important; }
.rounded-sm { border-radius: $border-radius-sm !important; }
.rounded-lg { border-radius: $border-radius-lg !important; }

// 响应式显示
@each $breakpoint in ('sm', 'md', 'lg', 'xl') {
  @include respond-to($breakpoint) {
    .d-#{$breakpoint}-none { display: none !important; }
    .d-#{$breakpoint}-block { display: block !important; }
    .d-#{$breakpoint}-flex { display: flex !important; }
  }
}

// 其他实用工具类
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.cursor-pointer { cursor: pointer !important; }
.overflow-hidden { overflow: hidden !important; }
.text-truncate { @include text-ellipsis; }
.text-break { word-break: break-word !important; }

// 文字大小工具类
.text-xs { font-size: $font-size-xs !important; }
.text-sm { font-size: $font-size-sm !important; }
.font-bold { font-weight: bold !important; } 